<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>报障详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			.button-width{
				width:24%
			}
			img{
				width: 24%;
				height: 15vh;
				padding-left: 2%; 
			}
			.mui-preview-image.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			.mui-preview-header,
			.mui-preview-footer {
				position: absolute;
				width: 100%;
				left: 0;
				z-index: 10;
			}
			.mui-preview-header {
				height: 44px;
				top: 0;
			}
			.mui-preview-footer {
				height: 50px;
				bottom: 0px;
			}
			.mui-preview-header .mui-preview-indicator {
				display: block;
				line-height: 25px;
				color: #fff;
				text-align: center;
				margin: 15px auto 4;
				width: 70px;
				background-color: rgba(0, 0, 0, 0.4);
				border-radius: 12px;
				font-size: 16px;
			}
			.mui-preview-image {
				display: none;
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			.mui-preview-image.mui-preview-in {
				-webkit-animation-name: fadeIn;
				animation-name: fadeIn;
			}
			.mui-preview-image.mui-preview-out {
				background: none;
				-webkit-animation-name: fadeOut;
				animation-name: fadeOut;
			}
			.mui-preview-image.mui-preview-out .mui-preview-header,
			.mui-preview-image.mui-preview-out .mui-preview-footer {
				display: none;
			}
			.mui-zoom-scroller {
				position: absolute;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				width: 100%;
				height: 100%;
				margin: 0;
				-webkit-backface-visibility: hidden;
			}
			.mui-zoom {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.mui-slider .mui-slider-group .mui-slider-item img {
				width: auto;
				height: auto;
				max-width: 100%;
				max-height: 100%;
			}
			.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
				display: inline-table;
			}
			.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
				display: table-cell;
				vertical-align: middle;
			}
			.mui-preview-loading {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
			}
			.mui-preview-loading.mui-active {
				display: block;
			}
			.mui-preview-loading .mui-spinner-white {
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -25px;
				margin-top: -25px;
				height: 50px;
				width: 50px;
			}
			.mui-preview-image img.mui-transitioning {
				-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
				transition: transform 0.5s ease, opacity 0.5s ease;
			}
			@-webkit-keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@keyframes fadeIn {
				0% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}
			@-webkit-keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			@keyframes fadeOut {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			.btn-box{
				display: none;
			}
			textarea{
				width: 70%;
				line-height: 1.5rem;
				margin-bottom: 0;
				padding: 0 .3rem;
			}
			#desc{
				width: 70%;
				display: inline-block;
				line-height: 2rem;
				padding-left: .3rem;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">报障详情</h1>
		</header>
		<div class="mui-content">
			<div class="mui-collapse-content">
				<ul class="item-flashing">
					<li class="item-weight">
						<label for="">设备名称</label>
						<span id="device_name"></span>
					</li>
					<li class="item-weight">
						<div>
							<label for="" style="float: left;">故障描述</label>
							<span id="desc" ></span>
						</div>
						<div id="imgShow">
						</div>
					</li>
					<li class="item-weight">
						<label for="">状态</label>
						<span id="w_state"></span>
					</li>
					<li class="item-weight">
						<label for="">提单人</label>
						<span id="c_man"></span>
					</li>
					<li class="item-weight">
						<label for="">提单时间</label>
						<span id="c_timestamp"></span>
					</li>
					<li class="item-weight">
						<label for="">处理人</label>
						<span id="d_man"></span>
					</li>
					<li class="item-weight">
						<label for="">处理方式</label>
						<span id="d_type"></span>
					</li>
					<li class="item-weight">
						<label for="">处理结果</label>
						<span id="d_result"></span>
					</li>
				</ul>
			</div>
			<div class="btn-box">
				<button type="button" class="mui-btn mui-btn-primary button-width" id="reject">否决</button>
				<button type="button" class="mui-btn mui-btn-primary button-width" id="confirm">确认</button>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/jquery.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});

			var w_id = localStorage.getItem('warning_id');
//			var w_id = 117;
			var mediaID = []; //用来存放图片meidiaid
			var warning_Count = 1; // 用于父页面监听子页面的点击完成事件
			function formatDateTime(type,time) {    //生成年月日时分秒
				if(time){
					var date = new Date(time);
				}else{
					var date = new Date();  
				}
			    var y = date.getFullYear();    
			    var m = date.getMonth() + 1;    
			    m = m < 10 ? ('0' + m) : m;    
			    var d = date.getDate();    
			    d = d < 10 ? ('0' + d) : d;    
			    var h = date.getHours();  
			    h = h < 10 ? ('0' + h) : h;  
			    var minute = date.getMinutes();  
			    var second = date.getSeconds();  
			    minute = minute < 10 ? ('0' + minute) : minute;    
			    second = second < 10 ? ('0' + second) : second;
			    if(type === 'date'){
			    	return y+'-'+ m +'-'+d+' '+h+':'+minute+':'+second;    
			    }else{
		    		return y+''+ m +''+d +''+h+''+minute+''+second;   
		    	}
			};
			var key = 'udacs!@#';//固定的key值
			var mobile = localStorage.getItem('mobile');
			var timestamp = formatDateTime();//年月日时分秒
			var token = mobile + timestamp + key;//token的拼接
			var md5 = hex_md5(token);//token的ma5加密
			//获取报障详情
			getWarnDetail(w_id);
			function getWarnDetail(id){
				$.ajax(httpUrl+'get_warning_detail',{
					data:JSON.stringify({
						"auth":{ 
							"mobile":mobile,
							"token":md5,
							"imei":"imei",
							"imsi":"imsi",
							"timestamp" :timestamp
						},
				   		"api_ver":"1",
						"req":{
							"w_id": id
						}
					}),
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					contentType: "text/plain; charset=utf-8",					
					success:function(data){
						mui.each(data.resp, function(key,item) {
							paddingData(key,item);
						})
						if(data.resp.c_man){
							document.getElementById('c_man').innerText = data.resp.c_man+'/'+data.resp.c_phone;
						}
						if(data.resp.d_man){
							document.getElementById('d_man').innerText = data.resp.d_man+'/'+data.resp.d_phone;
						}
					},
					error:function(xhr,type,errorThrown){
						mui.toast('网络异常或者服务器出错：'+type,{duration:'2000',type:'div'});
					}
				})
			}	
			//数据渲染 
			function paddingData(id,data){
				var DOM = document.getElementById(id);
				if(id == "media"){
					var text = '';
					for (var i=0;i<data.length;i++){
						mediaID.push(data[i].m_id);
						text += '<img src="'+httpUrl+'download?mediaId='+data[i].m_id+'" data-preview-src="" data-preview-group="1"/>';
					}
					document.getElementById("imgShow").insertAdjacentHTML('beforeEnd',text);
				} 
				if(DOM){ 
					switch(id){
						case "w_state":
							var state = {0:'待派单',1:'待处理',2:'待确认',3:'完成'};	
							DOM.innerText  = state[data-1];
							if(data == 3){
								$(".btn-box").show();
							}
						break;
						case "d_type":
							var type = {0:'设备维修',1:'设备替换'};
							DOM.innerText  = type[data];
						break;
						case "c_timestamp":
							DOM.innerText  = formatDateTime('date',data-0);
						break;
						default:
							DOM.innerText = data;
					}
				}
			}
			//按钮操作
	        mui(".btn-box").on('tap','.button-width',function(){
	        	var id = this.getAttribute('id');
	        	if(id == "confirm"){
					mui.ajax(httpUrl+'confirm_warning',{
						data:JSON.stringify({
							"auth":{ 
								"mobile":mobile,
								"token":md5,
								"imei":"imei",
								"imsi":"imsi",
								"timestamp" :timestamp
							},
					   		"api_ver":"1",
							"req":{
								"w_id": w_id
							}
						}),
						dataType:'json',//服务器返回json格式数据
						type:'post',//HTTP请求类型
						timeout:10000,//超时时间设置为10秒；
						contentType: "text/plain; charset=utf-8",					
						success:function(data){
							mui.toast('确认成功！',{duration:'2000',type:'div'});
							document.getElementsByClassName('btn-box')[0].style.display="none";
						},
						error:function(xhr,type,errorThrown){
							mui.toast('网络异常或者服务器出错：'+type,{duration:'2000',type:'div'});
						}
					})
		      }else{
					var device_name = document.getElementById("device_name").innerText;
					var desc = document.getElementById("desc").innerText;
					var warning_Detail = {};
					warning_Detail.id = w_id;
					warning_Detail.device_name = device_name;
					warning_Detail.desc = desc;
					warning_Detail.mediaID = mediaID;
					localStorage.setItem('warning_Detail',JSON.stringify(warning_Detail));
					localStorage.setItem("pageType","edit");
					mui.openWindow({
					    url:'rejectWarning.html',
					    id:'rejectWarning.html'
					});
				}
			})

	        //监听否决修改
			window.addEventListener('storage',function (e) {//e只是一个传参
                //获取被修改的键值
                if (e.key == 'warning_Count') {
                	getWarnDetail(w_id);
                }
          })
		</script>
		<script>
			mui.previewImage();
		</script>
	</body>

</html>